<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件操作</title>
</head>
<body>
    <div id="app">
        <!-- 点击事件的案例
              1.事件绑定使用基本语法  v-on:
              2.简化写法   v-on: 使用@符号代替
         -->
        {{num}} <br>
        <!-- <button v-on:click="">自增</button> -->
        <button @click="addNum">自增</button>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        /*  
            JS中的变量名称
            1. var 最常规的变量声明,没有作用域
            2. let 代替var 有作用域
            3. const 定义常量
         */
        const app = new Vue({
            el: "#app",
            data: {
                num: 100  
            },
            methods:{
                addNum(){
                    //自增
                    this.num ++
                }
            }
        })
    </script>
</body>
</html>